<!doctype html>
<html lang="us">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Example Page</title>
	<link href="jquery-ui.css" rel="stylesheet">
	<style type="text/css">
	  .draggable {
	    height: 50px;
	    background: #ccc;
	    position: absolute;
	    top: 0px;
	    left: 0px;
	  }

	  .droppable {
	    position: relative;
	    left: 250px;
	    top: 0;
	    width: 300px;
	    height: 300px;
	    background: #999;
	    color: #fff;
		margin-top:20px;
	  }
	</style>
</head>
<body>
	<div id="droppable" class="droppable">
		<!--<div class="draggable">1</div>
		<div class="draggable">2</div>-->
		<img id="img" alt="" src="http://jgj.hzlingdian.com/bgjsc/create/pic?content=test" class="draggable"/>
	</div>
	
	
	输入文字看效果:<input id="imgContent" type="text" value="test"/>

	<!--<div onclick="add()">添加</div>-->
 
	<script src="external/jquery/jquery.js"></script>
	<script src="jquery-ui.js"></script>

	<script>
		$( ".draggable" ).draggable({ containment: "parent" });
		$( "#droppable" ).droppable({
			drop: function(event, ui ) {
				console.log(event);
				console.log(ui);
				var x = ui.position.left;
				var y = ui.position.top;

				$(ui.helper).attr('mx',x);
				$(ui.helper).attr('my',y);
				$(ui.helper).attr('mc',$(ui.helper).html());
			}
		});


		var index = 2;
		function add() {
			index++;
			$('#droppable').append('<div class="draggable ui-draggable ui-draggable-handle">'+index+'</div>');

			// $("#droppable").draggable();
			$(".draggable").draggable({containment: "parent"});
			$("#droppable").droppable({
				drop: function(event, ui ) {
					console.log(event);
					console.log(ui);
					var x = ui.position.left;
					var y = ui.position.top;

					$(ui.helper).attr('mx',x);
					$(ui.helper).attr('my',y);
					$(ui.helper).attr('mc',$(ui.helper).html());
				}
			});
		}


		$('#imgContent').bind('input propertychange', function() {  

		    $('#img').attr('src', 'http://jgj.hzlingdian.com/bgjsc/create/pic?content='+$('#imgContent').val());
		});  

		
	</script>

</body>
</html>
